<!-- yangbuyi Copyright (c) https://yby6.com 2023. -->

<template>
  <view class="u-slider" :style="[$u.addStyle(customStyle)]">
    <slider
      :min="min"
      :max="max"
      :step="step"
      :value="value"
      :activeColor="activeColor"
      :inactiveColor="inactiveColor"
      :blockSize="$u.getPx(blockSize)"
      :blockColor="blockColor"
      :showValue="showValue"
      :disabled="disabled"
      @changing="changingHandler"
      @change="changeHandler"
    ></slider>
  </view>
</template>

<script>
import props from "./props.js";
export default {
  name: "u--slider",
  mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  methods: {
    // 拖动过程中触发
    changingHandler(e) {
      const { value } = e.detail;
      // 更新v-model的值
      this.$emit("input", value);
      // 触发事件
      this.$emit("changing", value);
    },
    // 滑动结束时触发
    changeHandler(e) {
      const { value } = e.detail;
      // 更新v-model的值
      this.$emit("input", value);
      // 触发事件
      this.$emit("change", value);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";
</style>
